<template>
    <!-- {{ $router.options.routes }} -->
    <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" :default-active="$route.path"
        text-color="#fff" :router="true" unique-opened>
        <template v-for="item in $router.options.routes" :key="item">
        <el-menu-item :index="item.path" v-if="item.children == undefined && item.meta.show == true">
            <component :is="item.meta.icon" class="icons"></component>
            <span>{{item.meta.title}}</span>
        </el-menu-item>
   
        <el-sub-menu :index="item.path"  v-if="item.children != undefined && item.meta.show == true">
            <template #title>
                <component :is="item.meta.icon" class="icons"></component>
                <span>{{item.meta.title}}</span>
            </template>
            <el-menu-item-group >
                <template v-for="child in item.children">
                <el-menu-item :index="child.path" v-if="child.meta.show == true">
                     <component :is="child.meta.icon" class="icons"></component>
                    {{ child.meta.title }}
                </el-menu-item>
               
                </template>
            </el-menu-item-group>
        </el-sub-menu>
      </template>
    </el-menu>
</template>

<script setup>



</script>

<style scoped>
.el-menu {
    width: 100%;
    height: calc(100vh - 50px);

}
.icons{
    width: 20px;
    height: 20px;
    margin-right: 3px;
}
</style>